<template>
  <div class="comment">
    <div class="submitbox">
      <h3 class='h3'>提交评论</h3>
      <div>
        <x-textarea id='textarea' placeholder="请输入评论内容" :rows='num' @button-mini-font-size='80' v-model='commentContent'>
        </x-textarea>
        <x-button mini plain type="primary" @click.native='address'>发表</x-button>
        <!-- <x-button @click.native="showPosition('top')" type="primary">发表</x-button> -->
      </div>
    </div>
    <div class="commentbox">
      <h3 class="line">评论详情</h3>
      <ul>
        <li v-for='(item,index) in commentList' :key='index'>
          <h4 class="comment-content">{{item.content}}</h4>
          <p><span class="comment-user">{{item.user_name}}</span><span class="comment-time">{{item.add_time|fmtTime}}</span></p>
        </li>
      </ul>
    </div>
    <div class="button-group">
      <!-- 给加载更多按钮绑定事件 -->
      <x-button type="primary" action-type='button' @click.native='loadMore' v-if='hasMore'>加载更多</x-button>
      <x-button type="warn" action-type='button' v-else>没有更多了</x-button>
      <toast v-model="toastText" type='warn' text="请输入内容" v-if='isVisibill'></toast>
      <toast v-model="show2" text="评论成功" v-if='isShow'></toast>
    </div>

  </div>
</template>
<script>
// 1.11 引入qs工具，它可以用来转换post请求数据的格式
import qs from 'qs'
// 引入文本域组件 和按钮组件
import { XTextarea, XButton, Toast } from 'vux'

import { getComment, getAddressComment } from '@/api'
export default {
  components: {
    Toast,
    XTextarea,
    XButton
  },
  data () {
    return {
      commentContent: '',
      num: 5,
      pageindex: 1,
      commentList: [],
      hasMore: true,
      toastText: '',
      show2: '',
      isVisibill: false,
      isShow: false
    }
  },
  // 1.1 在评论组件中挖坑，保存父组件传递过来的id
  props: ['id'],
  created () {
    // 1.2 调用定义的方法
    this.initComment()
  },
  methods: {
    // 1.2 初始化评论列表
    initComment () {
      getComment(this.id, this.pageindex).then(res => {
        console.log(res)
        // 1.3 将得到的数据给到定义的空数组
        // this.commentList = res.message
        // 1.5 因为加载更多的数据会覆盖之前的评论数据，所以这个做出以下更改
        let oldCommentList = this.commentList
        this.commentList = [...oldCommentList, ...res.message]
        // 1.6 当下一页的数据小于10条时，证明没有更多数据了
        // this.commentList 不能使用这个来判断，因为它代表总的数量
        if (res.message.length < 10) {
          // 将加载更多按钮隐藏，显示没有更多了
          this.hasMore = false
        }
      })
    },
    // 1.4加载更多功能
    loadMore () {
      this.pageindex += 1
      this.initComment()
    },
    // showPosition (position) {
    //   this.position = position
    //   this.showPositionValue = true
    // },
    // 1.7发表评论
    address () {
      // 发表评论之前先判断文本域内容是否为空，如果为空就弹框提示
      if (!this.commentContent.trim()) {
        //  改变提示框为显示状态  弹框进行提示
        this.isVisibill = true
      } else {
        //  发请求提交内容, 发请求之前，需要将第二个参数处理一下，不能以对象形式发送
        let obj = { content: this.commentContent }
        //  将obj对象转换成这种格式content=xxxxxx  借助于qs.stringify()
        getAddressComment(this.id, qs.stringify(obj)).then(res => {
          console.log(res)
          // 刷新列表前清空数据
          this.commentList = []
          this.initComment()
          // 清空文本域内容
          this.commentContent = ''
          this.isShow = true
        })
      }
    }
  }
}
</script>
<style>
  #textarea {
    font-size: 2rem;
  }
</style>
<style lang="scss" scoped>
  .h3 {
    border-bottom: 5px solid #0094ff;
  }
  .inputbox {
    border: 1px solid #999;
  }
  .comment h3 {
    font-weight: bold;
    margin: 10px 0;
    font-size: 14px;
  }
  .line {
    border-top: 1px solid #999;
    padding-top: 10px;
  }
  .commentbox {
    li:not(:last-child) {
      border-bottom: 1px solid #999;
      margin: 5px 0;
    }
    p {
      font-size: 14px;
    }
    .comment-content {
      color: #999;
      font-size: 14px;
    }
  }
  .comment-user,
  .comment-time {
    font-size: 12px;
    color: #26a2ff;
  }
</style>
